<template>
  <div class="fc2">
    <div class="toptitle">
      <div class="titletext">业务选择</div>
      <hr />
    </div>
    <el-scrollbar class="scrollbar">
      <div :class="{ scrollbarItem: true, check: checkIdx == idx }" v-for="(item, idx) in operationList" :key="idx"
        @click="changeOper(idx)">
        <div :class="{ secondNav: true, check: checkIdx === idx }">
          <div class="secondNav_Txt">
            {{ item.businessName }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import useOperationStore from '../../store/operation';

// 切换业务的数据对接处理
let operationStore = useOperationStore()

let checkIdx = ref(operationStore.index)
let operationId = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].id : '')
let operationList = ref(operationStore.data)
operationStore.$subscribe(async (mutation, state) => {
  checkIdx.value = operationStore.index
  operationId.value = operationStore.data[operationStore.index].id
  operationList.value = operationStore.data
})
// 修改当前业务
const changeOper = (idx) => {
  operationStore.updateCheck(idx)
}
onMounted(()=>{
  console.log(operationList.value)
})
</script>

<style lang="scss" scoped>
@use "@/styles/themes.scss";
.check {
  color: var(--primary-color) !important;
  // background-color: var(--secondary-color) !important;
  border-right: 2px solid var(--primary-color);
}
.fc2 {
  margin: 4px !important;
  border-radius: 5px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  // 第二导航宽
  --secondNavWidth:180px;
  margin: 10px 8px;
  margin-right: 0;
  width: var(--secondNavWidth);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgb(211, 210, 210);
  box-sizing: border-box;
  .toptitle {
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
  
    .titletext {
      border-left: 3px solid var(--primary-color);
      padding-left: 20px;
    }
  
    hr {
      background-color: rgb(194, 194, 194);
      height: 1px;
      border: none;
    }
  }
  .scrollbar {
    margin: 0;

    .scrollbarItem {
      margin: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      flex-direction: column;
      border-bottom: 0.1px solid rgb(236, 232, 232);
      color: var(--Nav-text-color);

      .secondNav {
        margin: 0;
        padding: 10px;
        height: 40px;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
          // background-color: var(--secondary-color);
          color: var(--primary-color);
        }

        div {
          background-color: transparent;
        }

        .secondNav_Txt {
          margin: 0 20px;
          font-size: 16px;
        }

        .secondNav_point {
          display: flex;
          flex: 1;
          justify-content: right;
          font-size: 14px;
        }
      }
    }
  }
}
</style>